<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>菜品类别编辑</title>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <i th:replace="~{common :: baseUrl}"></i>
</head>
<body>
<form class="layui-form layui-form-pane" action=""  lay-filter="example">


    <div class="container">
        <div class="row clearfix">
            <div class="col-md-6 column">

                <div class="layui-form-item">
                    <label class="layui-form-label">套餐编号</label>
                    <div class="layui-input-inline">
                        <input type="text" id="id" readonly name="id" lay-verify="required" th:value="${promotionMealHot.id}" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">套餐名称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="mealName"   placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">套餐类别</label>
                    <div class="layui-input-inline">
                        <select name="categoryId" id="categoryId"  lay-verify="required"   >
                            <option value=''>请选择套餐类别</option>
                            <option th:each="f : ${promotionMealHotCategoryList}"  th:value="${f.id}" th:text="${f.name}" ></option>
                        </select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">价格</label>
                    <div class="layui-input-inline">
                        <input type="text" name="priceString"   lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">门店</label>
                    <div class="layui-input-inline">
                        <select name="merchantsId" id="merchantsId" disabled  >
                            <option th:each="f : ${merchantsInformationList}"  th:value="${f.id}" th:text="${f.name}" th:selected="${promotionMealHot.merchantsId eq f.id}"></option>
                        </select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">排序</label>
                    <div class="layui-input-inline">
                        <input type="text" name="orders"   lay-verify="required" placeholder="数字越大越靠前" autocomplete="off" class="layui-input">
                    </div>
                </div>




            </div>
            <div class="col-md-6 column">

                <div class="layui-form-item">

                    <div class="layui-inline">
                        <label class="layui-form-label">上传图片</label>
                        <div class="layui-input-inline">
                            <div class="layui-upload">

                                <div class="layui-upload-list">
                                    <input hidden name="picPath" id="picPath" >
                                    <img width="100px" height="100px" class="layui-upload-img" name="showPic" id="showPic" >
                                    <p id="uploadText"></p>
                                </div>
                                <button type="button" class="layui-btn" id="uploadPic">上传图片</button>
                            </div>
                        </div>
                    </div>

                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">商品状态</label>
                    <div class="layui-input-block">
                        <input type="checkbox"    name="status" value="1" lay-skin="switch"  lay-text="上架|下架">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">打印标签</label>
                    <div class="layui-input-block">
                        <input type="checkbox"    name="printLabel" value="1" lay-skin="switch" lay-text="开启|关闭">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">手动打折</label>
                    <div class="layui-input-block">
                        <input type="checkbox"   name="manualDiscount" value="1" lay-skin="switch" lay-text="开启|关闭">
                    </div>
                </div>

            </div>

            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">说明</label>
                <div class="layui-input-block">
                    <textarea placeholder="请输入内容" name="explains"  class="layui-textarea"></textarea>
                </div>
            </div>


            <!--展示数据-->
            <div>

                <table class="layui-hide" id="mealHot" lay-filter="mealHot" ></table>

                <!--        表格右侧操作栏-->
                <script type="text/html" id="barDemo">
                    <button class="layui-btn  layui-btn-sm layui-btn-primary" lay-event="del"><i class="layui-icon layui-icon-close"></i></button>
                </script>
                <script type="text/html" id="toolbarDemo">
                    <div class="layui-btn-container">
                        <button type="button" class="layui-btn layui-btn-sm" lay-event="add">选择菜品</button>
                    </div>
                </script>
            </div>





        </div>
    </div>




    <div class="layui-form-item" align="center">
        <div class="layui-input-block">
            <button type="button" id="cancel" class="layui-btn ">取消</button>
            <button type="button" class="layui-btn" lay-submit="" lay-filter="sub">立即提交</button>

        </div>
    </div>

</form>



</body>
<script th:src="@{/layui/layui.js}"></script>
<script th:inline="none">
    //JavaScript代码区域
    layui.use(['element','form','upload','layer','table'], function() {
        var element = layui.element;
        var form = layui.form;
        var upload = layui.upload;
        var layer = layui.layer;
        var table = layui.table;
        var $ = layui.$;



        //表格初始化
        table.render({
            elem: '#mealHot'
            ,url:baseUrl+'promotion/mealHot/recordList'
            ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,width: 950
            ,totalRow: true
            ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            ,cols: [[
                {field:'recordId', width:145, title: '编号'}
                ,{field:'id', width:80, title: 'ID',hide:true}
                ,{field:'recordName', width:150, title: '菜品名称', totalRowText: '合计' }
                ,{field:'priceString', width:150, title: '售价' }
                ,{field:'recordNum', width:150, title: '数量' ,edit:'text'}
                ,{field:'totalPriceString', width:150, title: '小计' ,totalRow: true}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:195}
            ]]
            ,where: {
                id:$("#id").val()


            } //设定异步数据接口的额外参数

        });


        //行工具栏事件
        table.on('tool(mealHot)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            if(layEvent === 'del'){
                obj.del();
                $.ajax({
                    url:baseUrl+"promotion/mealHot/delMap",
                    data:{"id":$("#id").val(),"recordId":data.recordId},
                    type:"post",
                    dataType:"json",
                    success:function (result) {
                        if (result.code==0){
                            table.reload('mealHot', {
                                url: baseUrl+'promotion/mealHot/refresh'
                                ,where: {
                                    id:$("#id").val()
                                } //设定异步数据接口的额外参数

                            });

                        }else {
                            layer.open({
                                title: '删除菜品分类信息'
                                ,content: result.msg
                            });
                        }
                    },
                    error:function () {
                        layer.msg("服务器原地爆炸,请联系管理员!!!");
                    }
                })
            }

        });

        //表头工具栏事件
        table.on('toolbar(mealHot)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'add':

                    layer.open({
                        title: '编辑'
                        ,content: baseUrl+'promotion/mealHot/edit-chooseRecord-ui?merchantsId='+$("#merchantsId").val()+'&id='+$("#id").val()
                        ,type:2
                        ,area: ['800px', '650px']
                        ,closeBtn:1
                        ,end:function () {
                            table.reload('mealHot', {
                                url: baseUrl+'promotion/mealHot/refresh'
                                ,where: {
                                    id:$("#id").val()
                                } //设定异步数据接口的额外参数

                            });
                        }
                    })


                    break;


            };
        });



        //监听单元格编辑
        table.on('edit(mealHot)', function(obj){
            var value = obj.value //得到修改后的值
                ,data = obj.data //得到所在行所有键值
                ,field = obj.field; //得到字段


            //发送ajax请求  编辑APP信息
            $.ajax({
                url:baseUrl+"promotion/mealHot/editMap",
                data:data,
                type:"post",
                dataType:"json",
                success:function (result) {
                    if (result.code==0){
                        table.reload('mealHot', {
                            url: baseUrl+'promotion/mealHot/refresh'
                            ,where: {
                                id:$("#id").val()
                            } //设定异步数据接口的额外参数

                        });

                    }else {
                        layer.open({
                            title: '编辑菜品信息'
                            ,content: result.msg
                        });
                    }
                },
                error:function () {
                    layer.msg("服务器原地爆炸,请联系管理员!!!");
                }
            })
        });





        //图片上传
        var uploadInst = upload.render({
            elem: '#uploadPic'
            ,url: baseUrl+'upload/pic'
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#showPic').attr('src', result); //图片链接（base64）
                });
            }
            ,done: function(res){
                //如果上传失败
                if(res.code != 0){
                    return layer.msg('上传失败');
                }else {
                    $("#picPath").val(res.data.src)
                }
                //上传成功
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#uploadText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });




        //取消
        $("#cancel").click(function (){

            var  index = layer.confirm('确定要取消吗？取消后数据不会保存！', {
                btn: ['确定', '取消'] //可以无限个按钮
                , yes: function (index, layero) {

                    layer.close(index)
                    var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                    parent.layer.close(index); //再执行关闭

                    //发送ajax请求  编辑APP信息
                    $.ajax({
                        url:baseUrl+"promotion/mealHot/delAllMap",
                        data:{"id":$("#id").val()},
                        type:"post",
                        dataType:"json",
                        success:function (result) {
                            if (result.code==0){

                            }else {
                                layer.open({
                                    title: '编辑菜品信息'
                                    ,content: result.msg
                                });
                            }
                        },
                        error:function () {
                            layer.msg("服务器原地爆炸,请联系管理员!!!");
                        }
                    })


                }
                , btn2: function (index, layero) {

                }
            });



        });




        //添加
        form.on('submit(sub)', function(data){


            //发送ajax请求  编辑APP信息
            $.ajax({
                url:baseUrl+"promotion/mealHot/saveMap",
                data:data.field,
                type:"post",
                dataType:"json",
                success:function (result) {
                    if (result.code==0){

                        layer.open({
                            title: '修改套餐信息'
                            ,content: '修改成功！'
                            ,end:function () {
                                //当你在iframe页面关闭自身时
                                var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                                parent.layer.close(index); //再执行关闭
                            }
                        });


                    }else {
                        layer.open({
                            title: '修改采购单失败！'
                            ,content: result.msg
                        });
                    }
                },
                error:function () {
                    layer.msg("服务器原地爆炸,请联系管理员!!!");
                }
            })
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。

        });









    });

</script>
</html>